<template>
	<n-config-provider :theme="theme">
		<div>
			<Banner></Banner>
		</div>
		<n-card>
		      <n-space>
		        <n-button @click="theme = darkTheme">
		          深色
		        </n-button>
		        <n-button @click="theme = null">
		          浅色
		        </n-button>
				<!-- 首页 -->
				<div v-for="(item) in 300">
					首页
				</div>
		      </n-space>
		</n-card>
		
	</n-config-provider>
</template>

<script setup lang="ts">
	import { getBannerList } from '@/api/api.ts';
	import {
		NButton,
		NConfigProvider,
		darkTheme,
		NCard,
		NSpace
	} from 'naive-ui'
	// 路由获取传参对象
	const route = useRoute()
	// 路由
	const router = useRouter()
	// app.congfig的配置文件使用方式
	const appConfig = useAppConfig()
	console.log(darkTheme)
	const theme = ref(darkTheme)
	// 默认加default的layout
	definePageMeta({
	  layout: "default",
	})
	// 测试请求接口
	const getBannerListFn = () => {
		getBannerList().then((res: any) => {
			console.log(res)
		})
	}
	// 切换layout的默认页面
	const changeLayout = () => {
		// This will work in both `<script setup>` and `<script>`
		setPageLayout('custom')
	}
	onMounted(() => {
		// state的使用，获取
		const userData = useInfo();
		const token = useToken();
		console.log(userData.value);
		console.log(token.value);
		
		/**
		 * useCookie使用
		 */
		// 获取 Cookie
		const Cookies = useCookie('token')
		console.log(Cookies)
		// 设置 Cookie
		// Cookies.value = Cookies.value || ''
		// 删除  Cookie
		// Cookies.value = undefined || null
	})
	getBannerListFn()
</script>

<style>
</style>
